feat: implementa hideIf column na Table

CHANGELOG.md

@@ -2,6 +2,89 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.26.12](https://github.com/geolaborapp/react-bootstrap-utils/compare/v0.26.11...v0.26.12) (2021-10-20)
+
+
+### Bug Fixes
+
+* define default value in align helper function ([2f216a4](https://github.com/geolaborapp/react-bootstrap-utils/commit/2f216a4a308fc95332285692c75b84d7fedaecbd))
+
+### [0.26.11](https://github.com/geolaborapp/react-bootstrap-utils/compare/v0.26.10...v0.26.11) (2021-10-15)
+
+
+### Bug Fixes
+
+* load of an unlisted value in the form autocomplete ([85b5a80](https://github.com/geolaborapp/react-bootstrap-utils/commit/85b5a80efa7865d32dd25f6740b45328f5c7af0f))
+* load of an unlisted value in the form autocomplete ([c0c84d1](https://github.com/geolaborapp/react-bootstrap-utils/commit/c0c84d175c2ed8143d87b2087fa76da2136faa50))
+
+### [0.26.10](https://github.com/geolaborapp/react-bootstrap-utils/compare/v0.26.9...v0.26.10) (2021-09-03)
+
+
+### Features
+
+* makes the use of "template" more flexible for Dropdown and FormDropdown ([#9](https://github.com/geolaborapp/react-bootstrap-utils/issues/9)) ([24a2d86](https://github.com/geolaborapp/react-bootstrap-utils/commit/24a2d865811edadd94e82c3835da46f6bded4edc))
+
+### [0.26.9](https://github.com/geolaborapp/react-bootstrap-utils/compare/v0.26.8...v0.26.9) (2021-08-25)
+
+
+### Features
+
+* new dropdown selection component ([#6](https://github.com/geolaborapp/react-bootstrap-utils/issues/6)) ([60fae42](https://github.com/geolaborapp/react-bootstrap-utils/commit/60fae42059ece24817b61f293aeaa12842e85742))
+
+### [0.26.8](https://github.com/geolaborapp/react-bootstrap-utils/compare/v0.26.7...v0.26.8) (2021-08-13)
+
+
+### Features
+
+* include prop to hide closed modals content ([4099fdc](https://github.com/geolaborapp/react-bootstrap-utils/commit/4099fdcd86e9e1caafa539a7659d7edc82200dd7))
+* include prop to hide closed modals content ([82a00d6](https://github.com/geolaborapp/react-bootstrap-utils/commit/82a00d638671990edff1bcca602950364943cb00))
+
+### [0.26.7](https://github.com/geolaborapp/react-bootstrap-utils/compare/v0.26.6...v0.26.7) (2021-07-28)
+
+
+### Bug Fixes
+
+* set the selected value as initial search in autocomplete ([07c4369](https://github.com/geolaborapp/react-bootstrap-utils/commit/07c4369ec0585b426500824e65bb0599f9befee1))
+* set the selected value as initial search in autocomplete ([bd3be74](https://github.com/geolaborapp/react-bootstrap-utils/commit/bd3be741cba33fc0ad3583beaff63a57bed388ee))
+
+### [0.26.6](https://github.com/geolaborapp/react-bootstrap-utils/compare/v0.26.5...v0.26.6) (2021-07-21)
+
+
+### Features
+
+* adiciona componente SortableTable ([320feab](https://github.com/geolaborapp/react-bootstrap-utils/commit/320feab1af4e9a9339a6ac36e48551de17026ebe))
+
+
+### Bug Fixes
+
+* flexibiliza papel das linhas de uma tabela ([dd39fa7](https://github.com/geolaborapp/react-bootstrap-utils/commit/dd39fa7988f62fd43870ea78c34c4e3cd504aae2))
+
+### [0.26.5](https://github.com/geolaborapp/react-bootstrap-utils/compare/v0.26.3...v0.26.5) (2021-07-09)
+
+
+### Features
+
+* allow input masks functions on forminput2 ([afaa1ce](https://github.com/geolaborapp/react-bootstrap-utils/commit/afaa1cea773ea9abedd8ffaa4e827b0e14b22ea0))
+* allow input masks functions on forminput2 ([049b214](https://github.com/geolaborapp/react-bootstrap-utils/commit/049b21484b7b00dec2f91f9c775b6a18ef9ea264))
+
+
+### Bug Fixes
+
+* check if an element is descendant before remove ([a1eb85d](https://github.com/geolaborapp/react-bootstrap-utils/commit/a1eb85d56cbd0142673e2a35394821a5a4a19874))
+
+### [0.26.4](https://github.com/geolaborapp/react-bootstrap-utils/compare/v0.26.3...v0.26.4) (2021-07-09)
+
+
+### Features
+
+* allow input masks functions on forminput2 ([afaa1ce](https://github.com/geolaborapp/react-bootstrap-utils/commit/afaa1cea773ea9abedd8ffaa4e827b0e14b22ea0))
+* allow input masks functions on forminput2 ([049b214](https://github.com/geolaborapp/react-bootstrap-utils/commit/049b21484b7b00dec2f91f9c775b6a18ef9ea264))
+
+
+### Bug Fixes
+
+* check if an element is descendant before remove ([a1eb85d](https://github.com/geolaborapp/react-bootstrap-utils/commit/a1eb85d56cbd0142673e2a35394821a5a4a19874))
+
 ### [0.26.3](https://github.com/assisrafael/react-bootstrap-utils/compare/v0.26.2...v0.26.3) (2021-04-21)
 
 

README.md

@@ -46,3 +46,26 @@ Starting demo app
 ```bash
 npm run start
 ```
+
+## How to Publish a New Version
+
+Make sure the master branch is updated (git pull) and make sure all new commits (or expected commits) are included. 
+Suggested log visualization:
+
+```bash
+git log --graph --pretty=format:'%C(yellow)%h%C(cyan)%d%Creset %s - %C(blue)%an%Creset, %C(white)%ar%Creset'
+```
+
+On the terminal, run the command:
+
+```bash
+npm run release
+```
+
+followed by:
+
+```bash
+git push --follow-tags origin master && npm publish
+```
+
+Check the repository on Github, verifying the newly created tag

demo/Form2Examples.jsx

@@ -7,7 +7,13 @@ export function Form2Examples() {
     <div>
       Alternative Form implementation
       <Form2
-        initialValues={{ attrA: 'ABC', Obj: { x: 'X', z: 0 }, arr: [1, 2, 3], arrObj: [{ o: 1 }, { o: 2 }, { o: 3 }] }}
+        initialValues={{
+          attrA: 'ABC',
+          Obj: { x: 'X', z: 0 },
+          arr: [1, 2, 3],
+          arrObj: [{ o: 1 }, { o: 2 }, { o: 3 }],
+          masks: {},
+        }}
         onSubmit={(data) => console.log('onSubmit', data)}
         onChange={(data) => console.log('onChange', data)}
         transform={(formData) => {
@@ -76,6 +82,8 @@ export function Form2Examples() {
           <FormVersion />
         </div>
 
+        <FormMasked />
+
         <div className="form-group">
           <label htmlFor="">Observer</label>
           <FormObserver />
@@ -122,3 +130,95 @@ function FormObserver() {
 
   return <div>{state}</div>;
 }
+
+function FormMasked() {
+  const percentageFormControl = useFormControl2('masks.percentageValue');
+
+  const decimalMask = function (v) {
+    let maskedValue = String(v);
+
+    maskedValue = maskedValue.replace(/\D/g, '');
+    maskedValue = maskedValue.replace(/(\d)(\d{3})$/, '$1.$2');
+
+    return maskedValue;
+  };
+
+  const dateMask = function (v) {
+    let maskedValue = v;
+
+    maskedValue = maskedValue.replace(/\D/g, '');
+
+    maskedValue = maskedValue.replace(/(\d{2})(\d)/, '$1/$2');
+    maskedValue = maskedValue.replace(/(\d{2})(\d)/, '$1/$2');
+
+    return maskedValue;
+  };
+
+  const hourMask = function (v) {
+    let maskedValue = v;
+
+    maskedValue = maskedValue.replace(/\D/g, '');
+    maskedValue = maskedValue.replace(/(\d{2})(\d)/, '$1:$2');
+
+    return maskedValue;
+  };
+
+  const currency = function (v) {
+    let maskedValue = v;
+
+    maskedValue = maskedValue.replace(/\D/g, '');
+    maskedValue = maskedValue.replace(/(\d)(\d{2})$/, '$1,$2');
+    maskedValue = maskedValue.replace(/(?=(\d{3})+(\D))\B/g, '.');
+
+    return maskedValue;
+  };
+
+  const percentageMask = function (v) {
+    let maskedValue = v;
+    maskedValue = maskedValue.replace(/[^0-9\.]/g, '');
+
+    if (!maskedValue) {
+      return '';
+    }
+
+    return `${maskedValue}%`;
+  };
+
+  return (
+    <div>
+      <strong>Masked Inputs</strong>
+      <div className="form-group">
+        <label htmlFor="">Masked Date</label>
+        <FormInput2 name="masks.date" maxLength="10" maskFunction={dateMask} />
+      </div>
+
+      <div className="form-group">
+        <label htmlFor="">Masked Hour</label>
+        <FormInput2 name="masks.hour" maxLength="5" maskFunction={hourMask} />
+      </div>
+
+      <div className="form-group">
+        <label htmlFor="">Masked 3 decimals Number</label>
+        <FormInput2 name="masks.decimal" maskFunction={decimalMask} />
+      </div>
+
+      <div className="form-group">
+        <label htmlFor="">Percentage Mask % </label>
+        <FormInput2
+          name="masks.percentage"
+          maskFunction={percentageMask}
+          afterChange={(value) => {
+            const rawValue = value.replace(/\%/, '');
+            percentageFormControl.setValue(Number(rawValue) / 100);
+          }}
+        />
+        <FormInput2 type="number" name="masks.percentageValue" style={{ display: 'none' }} />
+      </div>
+
+      <div className="form-group">
+        <label htmlFor="">currency</label>
+        <FormInput2 name="masks.currency" maskFunction={currency} />
+      </div>
+    </div>
+  );
+}

demo/FormExamples.jsx

@@ -9,6 +9,7 @@ import {
   FormGroupRadio,
   FormGroupTextarea,
   FormGroupAutocomplete,
+  FormGroupDropdown,
   // eslint-disable-next-line import/no-unresolved
 } from '../dist/main';
 
@@ -18,12 +19,17 @@ export function FormExamples() {
       initialValues={{
         textField: 'abc',
         autocompleteField1: '2345',
+        autocompleteField4: 'unlisted item',
         selectField4: { e: 2, c: 'b' },
         switchField2: true,
         checkboxField2: true,
         radioField2: 'b',
         numberField: null,
         dateField: new Date().toISOString(),
+        dropdownField1: {
+          title: 'Title two',
+        },
+        dropdownField2: '03',
       }}
       onChange={console.info}
       onSubmit={(formData) => {
@@ -131,13 +137,22 @@ export function FormExamples() {
       </div>
 
       <div className="row">
+        <div className="col">
+          <FormGroupAutocomplete
+            name="disabledAutocompleteField"
+            label="Disabled Autocomplete"
+            options={['1234', '2345', '3456']}
+            placeholder="Type some numbers"
+            help="Disabled autocomplete"
+            disabled
+          />
+        </div>
         <div className="col">
           <FormGroupAutocomplete
             name="autocompleteField1"
             label="Autocomplete"
             options={['1234', '2345', '3456']}
             placeholder="Type some numbers"
-            disabled
             help="Autocomplete help"
           />
         </div>
@@ -348,6 +363,81 @@ export function FormExamples() {
           </div>
         </div>
       ))}
+
+      <FormGroupDropdown
+        name="dropdownField1"
+        label="Dropdown using object as value"
+        options={[
+          {
+            value: {
+              firstValue: 'Title one',
+              secondValue: 1,
+            },
+            label: {
+              title: 'Title one',
+              subtitle: 'subtitle one',
+            },
+          },
+          {
+            value: {
+              firstValue: 'Title two',
+              secondValue: 2,
+            },
+            label: {
+              title: 'Title two',
+              subtitle: 'subtitle two',
+            },
+          },
+          {
+            value: {
+              firstValue: 'Title three',
+              secondValue: 3,
+            },
+            label: {
+              title: 'Title three',
+              subtitle: 'subtitle three',
+            },
+          },
+        ]}
+        help="dropdown help"
+        placeholder="Select one value"
+        afterChange={() => console.log('afterChange dropdown')}
+        template={(label, value) => {
+          return value ? (
+            <div>
+              <strong>{label.title ?? '-'}</strong>
+              <p className="m-0">{label.subtitle ?? '-'}</p>
+            </div>
+          ) : (
+            label
+          );
+        }}
+        itemClassName="border-bottom"
+        childClassName="text-muted"
+        trackBy="secondValue"
+      />
+
+      <FormGroupDropdown
+        name="dropdownField2"
+        label="Dropdown using string as value"
+        options={[
+          {
+            value: '01',
+            label: <p>Value one</p>,
+          },
+          {
+            value: '02',
+            label: <p>Value two</p>,
+          },
+          {
+            value: '03',
+            label: <p>Value three</p>,
+          },
+        ]}
+        placeholder="Select one value"
+        includeEmptyItem={false}
+        menuClassName="p-4 w-100"
+      />
     </Form>
   );
 }