react-mac-finder
A picker of react component look like mac finder.
Demo link
https://ruoru.github.io/react-mac-finder
Support environment
- browser.
Applicable scene
- Must have a certain size parent element that wraps the component;
- If there are both used
selectIndexs
array andvalue
, thevalue
are used first, followed by theselectIndexs
, and then isdefaultValue
. Finally, I do not recommend usingselectIndexs
andvalue
at the same time. - Now can't scroll horizontally;
- When you use value, make sure that each option has a value;
Remaining problem
- If you find it, please give me an issue;
Interface design
property name | description | type | default |
---|---|---|---|
data * | The data of this component. | Array | [] |
dataKeys | The alias of the data key. |
Object | {text: 'text', value: 'value', disable: 'disable', child: 'child'} |
defaultSelectIndexs | The default selection index of data. | Array | - |
selectIndexs | Forces the selection of data by index. If value exists, selectIndexs fails. |
Array | - |
value | Forces select same value item of data. | String | Number | - |
onChange | Callback method, each time you change the selected value will run of the method. | Function (value, isEnd, selectIndexs) | - |
disabled | ReadOnly the component value. | Bool | false |
Install
npm install --save react-mac-finder
Example Code
;; { superprops; thisstate = selectIndexs: value: null isEnd: true data: text: "A1" value: "A1" child: text: "A11" value: "A11" child: text: "A111" value: "A111" text: "A112" value: "A112" text: "A113" value: "A113" text: "A114" value: "A114" text: "A115" value: "A115" text: "A116" value: "A116" text: "A12" value: "A12" text: "A13" value: "A13" text: "A14" value: "A14" text: "A15" value: "A15" text: "B1" value: "B1" disable: true child: text: "B11" value: "B11" child: text: "B111" value: "B111" text: "B112" value: "B112" text: "B113" value: "B113" text: "B12" value: "B12" text: "B13" value: "B13" text: "C1" value: "C1" child: text: "C11" value: "C11" child: text: "C111" value: "C111" text: "C112" value: "C112" child: text: "C113" value: "C113" text: "C114" value: "C114" text: "C115" value: "C115" text: "C116" value: "C116" text: "C12" value: "C12" disable: true child: text: "C121" value: "C121" text: "C13" value: "C13" text: "C14" value: "C14" text: "C15" value: "C15" ; } { const data selectIndexs value isEnd = thisstate; return <> <div className="finder-demo"> <Finder value=value data=data onChange= { this; } /> </div> <ul className="value-list"> <li>selectIndexs: selectIndexs</li> <li> value: <input value=value onChange= this /> </li> <li>isEndNode: ``</li> </ul> </> ; };
Local development
$ git clone https://github.com/ruoru/react-mac-finder.git$ cd react-mac-finder$ npm install$ npm start