❤
npm
Sign UpSign In

react-mac-finder

1.0.0 • Public • Published

react-mac-finder

Build Status Codecov Dependency Status

NPM Version NPM Downloads

A picker of react component look like mac finder.

暂无简体中文文档

Demo link

https://ruoru.github.io/react-mac-finder

Support environment

  • browser.

Applicable scene

  1. Must have a certain size parent element that wraps the component;
  2. If there are both used selectIndexs array and value, the value are used first, followed by the selectIndexs, and then is defaultValue. Finally, I do not recommend using selectIndexs and value at the same time.
  3. Now can't scroll horizontally;
  4. When you use value, make sure that each option has a value;

Remaining problem

  1. 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

Finder demo code

import React, { Component } from "react";
import { Finder } from "react-mac-finder";
 
class Finder extends Component {
  constructor(props) {
    super(props);
 
    this.state = {
      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"
            }
          ]
        },
      ]
    };
  }
 
  render() {
    const { data, selectIndexs, value, isEnd } = this.state;
    return (
      <>
        <div className="finder-demo">
          <Finder
            value={value}
            data={data}
            onChange={(value, isEnd, selectIndexs) => {
              this.setState({ value, isEnd, selectIndexs });
            }}
          />
        </div>
 
        <ul className="value-list">
          <li>selectIndexs: {selectIndexs.join(",")}</li>
          <li>
            value:
            <input
              value={value}
              onChange={e => this.setState({ value: e.target.value })}
            />
          </li>
          <li>isEndNode: {`${isEnd}`}</li>
        </ul>
      </>
    );
  }
}
export default Finder;

Local development

$ git clone https://github.com/ruoru/react-mac-finder.git
$ cd react-mac-finder
$ npm install
$ npm start

Readme

Keywords

Package Sidebar

Install

npm i react-mac-finder

Repository

github.com/ruoru/react-mac-finder

Homepage

github.com/ruoru/react-mac-finder#readme

Weekly Downloads

18

Version

1.0.0

License

MIT

Unpacked Size

63 kB

Total Files

19

Last publish

Collaborators

  • ruoru
Try on RunKit
Report malware