Skip to content

Commit

Permalink
fix(listpicker): listPicker JSX (#1481)
Browse files Browse the repository at this point in the history
  • Loading branch information
@berber1016
berber1016 committed Nov 19, 2021
1 parent c4577a8 commit a499a2d
Show file tree
Hide file tree
Showing 33 changed files with 871 additions and 921 deletions.
88 changes: 41 additions & 47 deletions src/cascader/Cascader.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import classNames from 'classnames';
import { isEmpty } from 'lodash';
import React, { useState } from 'react';
import List, { OptionProps } from '../list';
import React, { useEffect, useState } from 'react';
import { List, OptionProps } from '../list';
import Popover from '../popover';
import usePrefixCls from '../utils/hooks/use-prefix-cls';
import useControlledState from '../utils/hooks/useControlledState';
import { CascaderProps } from './interfance';
import { getLabelByValue } from './util';
import Trigger from './Trigger';
import { ListContext } from '../list/context';
import useChacheOptions from '../list/hooks/useCacheOptions';

const Cascader: React.FC<CascaderProps> = (props) => {
const {
Expand All @@ -16,7 +17,7 @@ const Cascader: React.FC<CascaderProps> = (props) => {
defaultValue = '',
visible: controlledVisible,
onChange,
prefixCls = 'cascader-new',
prefixCls = 'cascader--new',
getContainer,
onVisibleChange,
triggerProps,
Expand All @@ -26,29 +27,35 @@ const Cascader: React.FC<CascaderProps> = (props) => {
suffix,
disabled,
size,
overlayClassName,
contentClassName,
overlayStyle,
contentStyle,
separator = '',
placement = 'bottomLeft',
children,
...rest
} = props;
const defaultPrefixCls = usePrefixCls(prefixCls);
const [value, setSelectValue] = useControlledState(controlledValue, defaultValue);
const [visible, setVisible] = useControlledState(controlledVisible, false);
const [selectedTitle, setSelectedTitle] = useState(undefined);
const defaultPrefixCls = usePrefixCls(prefixCls);
const prefixIcon = prefix?.(undefined);
const suffixIcon = suffix?.(undefined);
// 这里实现的不好
const [title, setTitle] = useState('');
const cache = useChacheOptions();

const setOptions = (opts: OptionProps[]) => cache.setOptions(opts);

useEffect(() => {
setTitle(cache.getLabelByValue(value, separator));
}, [cache, separator, value]);

const handVisibleChange = (vis: boolean) => {
setVisible(vis);
onVisibleChange?.(vis);
};

const handleChange = (val?: string | string[], opts?: OptionProps | OptionProps[]) => {
const handleChange = (val?: string | string[]) => {
onChange?.(val);
setSelectValue((val as string) ?? '');
setSelectedTitle(getLabelByValue(val, opts, separator));

setVisible(false);
};

Expand All @@ -65,10 +72,8 @@ const Cascader: React.FC<CascaderProps> = (props) => {
onClick={() => setVisible(!visible)}
>
<Trigger
value={selectedTitle}
value={title}
size={size}
prefix={prefixIcon}
suffix={suffixIcon}
disabled={disabled}
onClear={handleOnClear}
onInputChange={(val) => {
Expand All @@ -78,46 +83,35 @@ const Cascader: React.FC<CascaderProps> = (props) => {
/>
</div>
);
// const renderItems = () =>
// options?.map((option: CascaderItemProps) => {
// const { childrens = [], ...optionRest } = option;
// if (!isEmpty(childrens)) {
// return (
// <Item isCascader {...optionRest}>
// <List model="cascader" className={`${defaultPrefixCls}--list`}>
// {childrens.map((child) => (
// <Item isCascader {...child} />
// ))}
// </List>
// </Item>
// );
// }
// return <Item {...optionRest} />;
// });
const renderOverlay = () => (
<List
{...rest}
options={options}
className={`${defaultPrefixCls}--list`}
className={classNames(`${defaultPrefixCls}--list`, contentClassName)}
prefix={prefix}
suffix={suffix}
style={contentStyle}
model="cascader"
value={value}
onChange={handleChange}
/>
>
{children}
</List>
);

return (
<Popover
content={renderOverlay()}
trigger="click"
visible={visible}
onVisibleChange={handVisibleChange}
getContainer={getContainer}
overlayClassName={`${defaultPrefixCls}--content`}
placement={placement}
overlayStyle={overlayStyle}
>
{renderTrigger()}
</Popover>
<ListContext.Provider value={{ value, onChange: handleChange, setOptions }}>
<Popover
content={renderOverlay()}
trigger="click"
visible={visible}
onVisibleChange={handVisibleChange}
getContainer={getContainer}
overlayClassName={classNames(`${defaultPrefixCls}--content`, overlayClassName)}
overlayStyle={overlayStyle}
placement={placement}
>
{renderTrigger()}
</Popover>
</ListContext.Provider>
);
};

Expand Down
62 changes: 53 additions & 9 deletions src/cascader/demos/Cascader.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,51 @@ import { CascaderProps } from '../interfance';
import Cascader from '../Cascader';
import '../style';
import './style.less';
import CascaderItem from '../../list/inner/CascaderItem';
import { List } from '../../list';

export default {
title: 'Upgraded/Cascader',
component: Cascader,
} as Meta;
const defaultLabels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];

const defaultOptions = [
{
label: '苹果',
value: 'apple',
childrens: [
{
label: '切',
value: 'cut',
childrens: [
{
label: '坏了',
value: 'bad',
},
{
label: '没坏',
value: 'good',
},
],
},
{
label: '掰开',
value: 'bye',
childrens: [
{
label: '坏了',
value: 'bad',
},
{
label: '没坏',
value: 'good',
},
],
},
],
},
];
const Template: Story<CascaderProps> = (props) => {
const options = defaultLabels.reduce(
(prev, curr) => [
Expand All @@ -31,22 +69,28 @@ const Template: Story<CascaderProps> = (props) => {
return (
<>
<div className="demo-box">
<Cascader options={options} triggerProps={{ placeholder: '请选择' }} size="normal" {...props} />
<Cascader options={defaultOptions} triggerProps={{ placeholder: '请选择' }} size="normal" {...props} />
</div>
<div className="demo-box">
<Cascader
disabled
options={options}
triggerProps={{ placeholder: '请选择', allowClear: false }}
size="normal"
{...props}
/>
<Cascader triggerProps={{ placeholder: '请选择', allowClear: false }} size="normal" {...props}>
<CascaderItem label="苹果" value="apple">
<List model="cascader">
<CascaderItem label="切" value="cat">
<List model="cascader">
<CascaderItem label="坏了" value="bad" />
<CascaderItem label="没坏" value="good" />
</List>
</CascaderItem>
<CascaderItem label="掰开" value="bye" />
</List>
</CascaderItem>
</Cascader>
</div>
<h3>自定义list,trigger宽度</h3>
<div className="demo-box">
<Cascader
options={options}
overlayStyle={{ width: 240 }}
contentStyle={{ width: 240 }}
triggerProps={{ placeholder: '请选择', allowClear: false, style: { width: 240, textAlign: 'left' } }}
size="small"
{...props}
Expand Down
6 changes: 6 additions & 0 deletions src/cascader/interfance.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,13 @@ export interface CascaderProps extends Omit<ListProps, 'options' | 'onChange' |
triggerProps: Omit<TriggerProps, 'prefixCls' | 'onInputChange' | 'disabled' | 'getOptionByValue' | 'separator'>;
onChange?: (val?: string | string[], options?: OptionProps | OptionProps[]) => void;
getContainer?: (node: HTMLElement) => HTMLElement;
overlayClassName?: string;
overlayStyle?: React.CSSProperties;
/**
* contentClassName?:string;
*/
contentClassName?: string;
contentStyle?: React.CSSProperties;
placement?: Placement;
}
export interface OptionProps extends ListOptionProps {
Expand Down
4 changes: 2 additions & 2 deletions src/cascader/style/index.less
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
@import '../../stylesheet/variables/index.less';
@import '~@gio-design/utils/lib/less/mixins.less';
@list-prefix-cls: ~'@{component-prefix}-cascader-new';
@list-prefix-cls: ~'@{component-prefix}-cascader--new';

.@{list-prefix-cls} {
&--content {
z-index: 100;
}

&--list {
box-sizing: border-box;
min-width: 120px;
max-width: 320px;
height: auto;
max-height: 520px;
.scrollbar();
Expand Down
16 changes: 0 additions & 16 deletions src/cascader/util.ts
View file

This file was deleted.

39 changes: 0 additions & 39 deletions src/list-picker/StaticListPicker.tsx
View file

This file was deleted.

2 changes: 1 addition & 1 deletion src/list-picker/Trigger.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const Trigger: React.FC<TriggerProps> = (props) => {
onClear?.(e);
e.stopPropagation();
};
return <Input.Button placeholder={placeholder} value={value} onClear={handleClear} {...rest} />;
return <Input.Button placeholder={placeholder} value={value as string} onClear={handleClear} {...rest} />;
};

export default Trigger;

1 comment on commit a499a2d

@vercel
Copy link

@vercel vercel bot commented on a499a2d Nov 19, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.