fix(property-selector, filter-picker): fix style (#1534)

Co-authored-by: maxin <maxin@growingio.com>
growingio · Nov 26, 2021 · 5318764 · 5318764 · vercel · Nov 26, 2021
1 parent fc7f46d
commit 5318764
Show file tree

Hide file tree

Showing 13 changed files with 1,166 additions and 275 deletions.
diff --git a/src/legacy/base-picker/style/index.less b/src/legacy/base-picker/style/index.less
@@ -1,8 +1,8 @@
 @import '../../../stylesheet/index.less';
 
-@picker-prefix-cls-legacy: ~'@{component-prefix}-base-picker-legacy';
+@base-picker-prefix-cls-legacy: ~'@{component-prefix}-base-picker-legacy';
 
-.@{picker-prefix-cls-legacy} {
+.@{base-picker-prefix-cls-legacy} {
   position: relative;
   width: 360px;
   height: fit-content;

diff --git a/src/legacy/filter-picker/FilterPicker.tsx b/src/legacy/filter-picker/FilterPicker.tsx
@@ -41,7 +41,7 @@ const FilterPicker = (props: FilterPickerProps) => {
     disabled,
   } = props;
 
-  const localeTextObject: typeof defaultLocaleTextObject = useLocale('FilterPicker-legacy');
+  const localeTextObject: typeof defaultLocaleTextObject = useLocale('FilterPicker');
   const textObject = useMemo(() => ({ ...defaultLocaleTextObject, ...localeTextObject }), [localeTextObject]);
 
   const [localVisible, setLocalVisible] = useState(false);

diff --git a/src/legacy/filter-picker/style/index.less b/src/legacy/filter-picker/style/index.less
@@ -1,4 +1,4 @@
-.filter-picker-legacy_icon {
+.filter-picker_icon {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -7,6 +7,6 @@
   background: #f7f8fc;
   border-radius: 4px;
 }
-.filter-picker-legacy_icon:hover {
+.filter-picker_icon:hover {
   box-shadow: 0 0 3px #ccc;
 }
diff --git a/src/legacy/property-selector/PropertyCard.tsx b/src/legacy/property-selector/PropertyCard.tsx
@@ -33,7 +33,7 @@ function PropertyCard(props: PropertyCardProps) {
     const res = await fetchData?.(nodeData);
     return res;
   }, [nodeData]);
-  const prefixCls = usePrefixCls('property-picker');
+  const prefixCls = usePrefixCls('property-picker-legacy');
   const propCardPrefixCls = `${prefixCls}-card`;
   const valueType = ValueTypeMap[data?.valueType ? data?.valueType?.toLowerCase() : ''] || null;
   return (

diff --git a/src/legacy/property-selector/PropertyPicker.tsx b/src/legacy/property-selector/PropertyPicker.tsx
@@ -99,7 +99,7 @@ const PropertyPicker: React.FC<PropertyPickerProps> = (props: PropertyPickerProp
 
   const [currentValue, setCurrentValue] = useState<PropertyValue | undefined>(initialValue);
 
-  const prefixCls = usePrefixCls('property-picker');
+  const prefixCls = usePrefixCls('property-picker-legacy');
 
   const [detailVisible, setDetailVisible] = useState(false);
   const debounceSetDetailVisible = useDebounceFn((visible: boolean) => {

diff --git a/src/legacy/property-selector/PropertySelector.stories.tsx b/src/legacy/property-selector/PropertySelector.stories.tsx
diff --git a/src/legacy/property-selector/PropertySelector.tsx b/src/legacy/property-selector/PropertySelector.tsx
@@ -35,7 +35,7 @@ const PropertySelector: React.FC<PropertySelectorProps> = (props) => {
   const inputText = useMemo(() => currentValue?.name || currentValue?.label, [currentValue]);
   const inputValueRef = useRef<HTMLSpanElement | null>(null);
 
-  const clsPrifx = usePrefixCls('property-selector');
+  const clsPrifx = usePrefixCls('property-selector-legacy');
   const selectorCls = classNames(clsPrifx, className);
   function handleDropDownVisibleChange(show: boolean) {
     onDropdownVisibleChange?.(show);

diff --git a/src/legacy/property-selector/components/list/style/index.less b/src/legacy/property-selector/components/list/style/index.less
@@ -1,8 +1,8 @@
 @import '../../../../../stylesheet/index.less';
 
-@list-prefix-cls-legacy: ~'@{component-prefix}-list-property-selector';
+@list-property-selector-prefix-cls-legacy: ~'@{component-prefix}-list-property-selector';
 
-.@{list-prefix-cls-legacy} {
+.@{list-property-selector-prefix-cls-legacy} {
   margin: 0;
   padding: 0;
   list-style-type: none;

diff --git a/...roperty-selector/PropertyCard.stories.tsx → ...y-selector/demos/PropertyCard.stories.tsx b/...roperty-selector/PropertyCard.stories.tsx → ...y-selector/demos/PropertyCard.stories.tsx
@@ -3,8 +3,9 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react/types-6-0';
 import _ from 'lodash';
-import PropertyCard from './PropertyCard';
-import { PropertyCardProps } from './interfaces';
+import PropertyCard from '../PropertyCard';
+import { PropertyCardProps } from '../interfaces';
+import '../style/index';
 
 export default {
   title: 'Pro/PropertyCard',

diff --git a/...perty-selector/PropertyPicker.stories.tsx → ...selector/demos/PropertyPicker.stories.tsx b/...perty-selector/PropertyPicker.stories.tsx → ...selector/demos/PropertyPicker.stories.tsx
@@ -3,9 +3,10 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react/types-6-0';
 import _ from 'lodash';
-import PropertyPicker from './PropertyPicker';
-import { PropertyPickerProps } from './interfaces';
-import './style/index.less';
+import PropertyPicker from '../PropertyPicker';
+import { PropertyPickerProps } from '../interfaces';
+import '../style/index';
+import insightDimensions from './insightDimensions';
 
 export default {
   title: 'Pro/PropertyPicker',
@@ -27,6 +28,7 @@ const Template: Story<PropertyPickerProps> = (args) => (
 export const Default = Template.bind({});
 Default.args = {
   disabledValues: ['b'],
+  dataSource: insightDimensions,
   // placeholder: '请选择...',
   onChange: (v: any) => {
     console.log('onchange', v);