testzm0318
/
farris-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor(section): refector section render function

This commit is contained in:
Sagi 2022-10-01 22:12:39 +08:00
parent 8a2439cdfa
commit e7288043a4
4 changed files with 124 additions and 52 deletions
packages/ui-vue
components/section/src
section.component.tsxsection.props.ts
src
App.vue
components
section.vue

152
packages/ui-vue/components/section/src/section.component.tsx
View File

@ -10,6 +10,14 @@ export default defineComponent({
return true;
});
const shouldShowHeaderTitle = computed(() => {
return true;
});
const shouldShowSubHeaderTitle = computed(() => {
return true;
});
const shouldShowToolbarInHeader = computed(() => {
return false;
});
@ -28,65 +36,109 @@ export default defineComponent({
const toolbarButtons = ref([]);
const headerClass = computed(() => ({}));
const headerClass = computed(() => {
const customClassArray = props.headerClass.split(' ');
const headClassObject = {
'f-section-header': true
};
customClassArray.reduce<Record<string, unknown>>((classObject, classString) => {
classObject[classString] = true;
return classObject;
}, headClassObject);
return headClassObject;
});
const extendAreaClass = computed(() => ({}));
const contentClass = computed(() => ({
'f-section-content': true,
const extendAreaClass = computed(() => ({
'f-section-extend': true
}));
function getToolbarState() {
const contentClass = computed(() => {
const customClassArray = props.contentClass.split(' ');
const contentClassObject = {
'f-section-content': true
};
customClassArray.reduce<any>((classObject, classString) => {
classObject[classString] = true;
return classObject;
}, contentClassObject);
return contentClassObject;
});
function getToolbarState(buttonId: string, visiableMap: any, defaultValue: boolean) {
return true;
}
const mainTitle = ref(props.mainTitle);
const subTitle = ref(props.subTitle);
function renderSectionHeader() {
return (
shouldShowHeader.value && (
<div class={headerClass.value}>
{shouldShowHeaderTitle.value && (
<div class="f-title">
<h4 class="f-title-text">{mainTitle.value}</h4>
{shouldShowSubHeaderTitle.value && <span>{subTitle}</span>}
</div>
)}
</div>
)
);
}
function renderSectionContent() {
return <div class={contentClass.value}>{context.slots.default && context.slots.default()}</div>;
}
return () => {
return (
<>
{shouldShowHeader.value && (
<div class="f-section-header" class={headerClass.value}>
{shouldShowToolbarInHeader.value && (
<div class="f-section-header--btn-placeholder">
{toolbarButtons.value
.filter((toolButton: ButtonConfig) => getToolbarState(toolButton.id, btnVisible, true))
.forEach((toolButton: ButtonConfig) => {
return <button class={toolButton.appearance.class}>{toolButton.title}</button>;
})}
<div class="f-section">
{renderSectionHeader()}
{renderSectionContent()}
</div>
)}
</div>
)}
{shouldShowToolbarInContent.value && (
<div class="f-section-header--btn-placeholder">
{toolbarButtons.value
.filter((toolButton: ButtonConfig) => getToolbarState(toolButton.id, btnVisible, true))
.forEach((toolButton: ButtonConfig) => {
return <button class={toolButton.appearance.class}>{toolButton.title}</button>;
})}
</div>
)}
{shouldShowExtendArea.value && (
<div class="f-section-extend" class={extendAreaClass.value}>
{context.slots.extend && context.slots.extend()}
</div>
)}
<div class={contentClass.value}>
{shouldShowToolbarTemplateInContent.value && (
<div class="f-section-toolbar f-section-content--toolbar">
{context.slots.toolbarButtons &&
context.slots.toolbarButtons({
datas: toolbarBtns,
dpHidden: toolbarDpHidden,
dpDatas: inMoreButtonContents,
})}
</div>
)}
{context.slots.default && context.slots.default()}
</div>
</>
);
};
},
// return () => {
// return (
// <>
// {shouldShowHeader.value && (
// <div class={headerClass.value}>
// {shouldShowToolbarInHeader.value && (
// <div class="f-section-header--btn-placeholder">
// {toolbarButtons.value
// .filter((toolButton: ButtonConfig) => getToolbarState(toolButton.id, {}, true))
// .forEach((toolButton: ButtonConfig) => {
// return <button class={toolButton.appearance.class}>{toolButton.title}</button>;
// })}
// </div>
// )}
// </div>
// )}
// {shouldShowToolbarInContent.value && (
// <div class="f-section-header--btn-placeholder">
// {toolbarButtons.value
// .filter((toolButton: ButtonConfig) => getToolbarState(toolButton.id, {}, true))
// .forEach((toolButton: ButtonConfig) => {
// return <button class={toolButton.appearance.class}>{toolButton.title}</button>;
// })}
// </div>
// )}
// {shouldShowExtendArea.value && (
// <div class={extendAreaClass.value}>{context.slots.extend && context.slots.extend()}</div>
// )}
// <div class={contentClass.value}>
// {shouldShowToolbarTemplateInContent.value && (
// <div class="f-section-toolbar f-section-content--toolbar">
// {context.slots.toolbarButtons && context.slots.toolbarButtons({})}
// </div>
// )}
// {context.slots.default && context.slots.default()}
// </div>
// </>
// );
// };
}
});

7
packages/ui-vue/components/section/src/section.props.ts
View File

@ -1,11 +1,15 @@
import { ExtractPropTypes, PropType } from 'vue';
export interface ButtonAppearance {
class: string;
}
export interface ButtonConfig {
id: string;
disable: boolean;
title: string;
click: any;
appearance: object;
appearance: ButtonAppearance;
visible?: boolean;
}
@ -32,5 +36,6 @@ export const sectionProps = {
toolbar: { type: Object as PropType<ToolbarConfig>, default: {} },
showToolbarMoreButton: { type: Boolean, default: true },
clickThrottleTime: { type: Number, default: 350 },
headerClass: { type: String, default: '' }
};
export type SectionProps = ExtractPropTypes<typeof sectionProps>;

2
packages/ui-vue/src/App.vue
View File

@ -7,6 +7,7 @@ import Avatar from './components/avatar.vue';
import ButtonEdit from './components/button-edit.vue';
import FButton from '../components/button/src/button.component';
import Switch from './components/switch.vue';
import Section from './components/section.vue';
const canEdit = ref(true);
const disable = ref(false);
@ -34,6 +35,7 @@ const canAutoComplete = ref(false);
<label for="checkbox">disable:{{ disable }}</label>
<FButton :disable="disable"></FButton>
<Switch></Switch>
<Section></Section>
</template>
<style scoped>

13
packages/ui-vue/src/components/section.vue Normal file
View File

@ -0,0 +1,13 @@
<script setup lang="ts">
import Section from '../../components/section/src/section.component';
</script>
<template>
<Section show-header main-title="This is a section title">
<div>
<span>This is setion content.</span>
</div>
</Section>
</template>