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

feature: implement notify component

This commit is contained in:
Sagi 2022-09-27 17:10:19 +08:00
parent c5a2f73ae3
commit 6a64dea4e7
2 changed files with 61 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
packages/ui-vue/components/notify/src/notify.component.tsx
View File

@ -1,3 +1,4 @@
import { isFunction } from 'lodash';
import { computed, defineComponent, ref, SetupContext } from 'vue';
import { NotifyContainerComponent } from './notify-container.component';
import { NotifyData, NotifyProps, notifyProps } from './notify.props';
@ -11,24 +12,64 @@ export default defineComponent({
'farris-notify': true,
}));
const defaultNotifyDistance = {
left: 12,
right: 12,
top: 136,
bottom: 12,
};
const toasts = ref(props.toasts || []);
const notifyStyle = computed(() => ({
left: '',
right: '',
top: '',
bottom: '',
left: props.position.indexOf('left') > -1 ? `${props.left ? props.left : defaultNotifyDistance.left}px` : '',
right: props.position.indexOf('right') > -1 ? `${props.right ? props.right : defaultNotifyDistance.right}px` : '',
top: props.position.indexOf('top') > -1 ? `${props.top ? props.top : defaultNotifyDistance.top}px` : '',
bottom: props.position.indexOf('bottom') > -1 ? `${props.bottom ? props.bottom : defaultNotifyDistance.bottom}px` : '',
}));
const toasts = computed(() => {
return props.toasts ? props.toasts : [];
});
function onClose($event: Event) {}
function onClick($event: Event) {}
function closeToast(toast: NotifyData) {}
function addToast(toast: NotifyData) {
if (toasts.value.length >= props.limit) {
toasts.value.shift();
}
toasts.value.push(toast);
// if (props.timeout) {
// this._setTimeout(notify);
// }
}
function invokeToastOnRemoveCallback(toast: NotifyData) {
if (toast && toast.onRemove && isFunction(toast.onRemove)) {
toast.onRemove.call(this, toast);
}
}
function clear(id: number | string) {
const targetToastIndex = toasts.value.findIndex((toast: NotifyData) => toast.id === id);
if (targetToastIndex > -1) {
const targetToast = toasts.value[targetToastIndex];
invokeToastOnRemoveCallback(targetToast);
toasts.value.splice(targetToastIndex, 1);
}
}
function clearAll() {
toasts.value.forEach((toast: NotifyData) => invokeToastOnRemoveCallback(toast));
toasts.value.length = 0;
context.emit('empty');
}
return () => {
return (
<div id={props.id} class={notifyClass.value} style={notifyStyle.value}>
{toasts.value.map((toastData: NotifyData) => {
return <f-toast v-model={toastData} animate={props.animate} onClose={} onClick={}></f-toast>;
return <f-toast v-model={toastData} animate={props.animate} onClose={onClose} onClick={onClick}></f-toast>;
})}
</div>
);

13
packages/ui-vue/components/notify/src/notify.props.ts
View File

@ -13,6 +13,8 @@ export type ToastyAnimate =
| 'bounceIn'
| 'fadeIn';
export type NotifyTheme = 'default' | 'material' | 'bootstrap';
export interface NotifyButton {
customClass?: string;
text: string;
@ -37,9 +39,18 @@ export interface NotifyData {
// export interface NotifyData extends NotifyOptions {}
export const notifyProps = {
limit:{type:Number,default:5},
showCloseButton:{type:Boolean,default:true},
position: { type: String as PropType<NotifyPosition>, default: 'top-center' },
timeout:{type:Number,default:3000},
theme:{type:String as PropType<NotifyTheme>,default:'bootstrap'},
left:{type:Number},
right:{type:Number},
top:{type:Number},
bottom:{type:Number},
id: { type: String },
animate: { type: String as PropType<ToastyAnimate>, default: 'fadeIn' },
position: { type: String as PropType<NotifyPosition>, default: 'toasty-position-top-center' },
toasts: { type: Array<NotifyData> },
options: { type: Object as PropType<NotifyData> },
};
export type NotifyProps = ExtractPropTypes<typeof notifyProps>;