@jswork/react-ant-select-cascader v1.0.3

react-ant-select-cascader

Cascader based on ant select.

installation

npm install -S @jswork/react-ant-select-cascader

usage

1. import css

   @import "~@jswork/react-ant-select-cascader/dist/style.css";
   
   // or use sass
   @import "~@jswork/react-ant-select-cascader/dist/style.scss";
   
   // customize your styles:
   $react-ant-select-cascader-options: ()

2. import js

   import React from 'react';
   import ReactAntSelectCascader from '@jswork/react-ant-select-cascader';
   import styled from 'styled-components';
   import ReactAntSelect from '@jswork/react-ant-select';
   import nx from '@jswork/next';
   import '@jswork/next-key-map';
   
   const Container = styled.div`
     width: 80%;
     margin: 30px auto 0;
   `;
   
   const Item = styled.div`
     strong {
       display: inline-block;
       text-align: left;
       width: 80px;
     }
     margin-bottom: 10px;
   `;
   
   const headers = {
     'Content-Type': 'application/json',
     'authorization':
       'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJ1dHlwIjoiTERBUF9VU0VSIiwiYXVkIjpbImFvc3AtZ2F0ZXdheSIsIml5eS1hcGkiLCJhb3QiLCJ2d29wcyIsIm5vdGlmaWNhdGlvbi1jZW50ZXItYWRtaW4iLCJhb2MtYWRtaW4iXSwic3ViIjoiYXJpYy56aGVuZyIsImlzcyI6ImFsbzcuY29tIiwiZXhwIjoxNjMyNTc1NjA5LCJqdGkiOiI5YmE2NDU3OS0wODRmLTQwOTMtOGI0MC1kMDIwOWYwYmVmZjYifQ.AyromYw2qS5s9vXR7h9Gns9ZQbyg47qMfhuxGJh54h8wcyhDRNiF3IhwpGIAgskYPMVu6m-w5rotG7A4OmHSEfcfRw2vzr0inxDuOxo83eehN38ciI3EgTmIQ-IYKQVUcEVZjVG4uheSnfGcRNgjLApstIRDu57m3aGD7L-1DMs',
     'baseinfo': '0,6847'
   };
   
   const query = [
     () => {
       return fetch(
         'https://aosp-gateway.beta.saybot.net/ace-kellis/api/v1/course_series_english?pageNo=0&pageSize=10&name=',
         { headers }
       )
         .then((r) => r.json())
         .then((res) => {
           const items = nx.keyMap(res.result, {
             uuid: 'value',
             cnName: 'label'
           });
           return { items, total: res.totalCount };
         });
     },
     (id) => {
       return fetch(
         `https://aosp-gateway.beta.saybot.net/ace-kellis/api/v1/course_english?pageSize=1000&courseSeriesUuid=${id}`,
         { headers }
       )
         .then((r) => r.json())
         .then((res) => {
           console.log('result:', res);
           const items = nx.keyMap(res.result, {
             uuid: 'value',
             cnName: 'label'
           });
           return { items, total: res.totalCount };
         });
     }
   ];
   
   export default (props: any) => {
     const labels = ['课程系列', '课程'];
     return (
       <Container>
         <ReactAntSelectCascader
           query={query}
           template={({ index, props }) => {
             return (
               <Item key={index}>
                 <strong>{labels[index]}</strong>
                 <ReactAntSelect style={{ width: 200 }} {...props} />
               </Item>
             );
           }}
           onChange={(e) => {
             console.log('e:', e.target.value);
           }}
         />
       </Container>
     );
   };

preview

• https://afeiship.github.io/react-ant-select-cascader/

license

Code released under the MIT license.