shiftplanner v2.3.0
Getting started
Use the package manager yarn/npm to install ShiftPlanner.
$ npm install shiftplanner
Usage
ES6 modules
import ShiftPlanner from 'shiftplanner';
<ShiftPlanner plan={data} /> // Pass value in `plan` prop as per schema below.
You can pass following props to ShiftPlanner
component
Prop | Type | Default Value | Required | Description |
---|---|---|---|---|
plan | IPlanner | undefined | true | Plan values |
Actions | IPlanActions[] | undefined | false | Actions for Shift |
handlePrevDateClick | fn | undefined | false | Change date to previous |
handleNextDateClick | fn | undefined | false | Change date to next |
handleAssigneeClick | fn | undefined | false | Click fn for assignee |
theme | ThemeOptions | defaultTheme | false | Customized MUI theme |
dark | boolean | false | false | enable dark theme |
Schema
You can pass your values in plan
prop. Shift Planner component required data in specific way.
FYI: duration
of task/shift is figured out by startTime
& endTime
.
IPlanner
{
id: string;
metaData: IMetaData;
shifts: IShift[];
}
IMetaData
// (holds basic information about planner)
{
currentDate: string;
location: string;
status?: string; // status of shift
rawData?: any; // Here you can send your original value as in stringify format & see in UI.
}
IShift
// Collection of task Groups
{
id: string;
name: string;
startTime: string;
endTime: string;
createdAt: string;
updatedAt: string;
groups: IGroup[];
assignee?: IAssignee[];
isActionEnabled?: boolean;
}
IGroup
// Collection of Tasks
{
id: string;
name: string;
createdAt: string;
updatedAt: string;
tasks: ITask[];
}
ITask
// Collection of Tasks
{
id: string;
name: string;
startTime: string;
endTime: string;
assignee?: IAssignee[];
createdAt?: string;
updatedAt?: string;
additionalInfo?: string;
isActionEnabled?: boolean;
}
IAssignee
// Action for assignee user
{
id: string;
name: string;
image: string;
description?: string;
}
IPlanActions
You can attach action to shift & task & even disable is specific shift/task.
{
shift: IAction[],
task: IAction[],
}
Action Prop
IAction
{
text: string;
onClick: (event: React.MouseEvent<HTMLElement>) => void;
}
You can disable it for specific shift/task by setting boolean value for isActionEnabled
in payload.
Task of shift/task is already set by data attribute data-id
. You can access it by using this.
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
const elem = event.target as HTMLElement;
console.log(elem.dataset.id) // This will be the ID of shift/task you have clicked.
};
Config
coming soon...
Theme
Package is build on material UI. You can customize theme as per your choice & pass as prop to component. Feel free to use these tools.
For SSR (e.g: NextJs
) Project
You need to disable SSR for this component. There are many ways to disable CSS for Non-SSR Friendly component. Simple way is to use react-no-ssr
package.
npm i --save react-no-ssr
npm i --save-dev @types/react-no-ssr // for typescript
import NoSSR from 'react-no-ssr';
import ShiftPlanner from 'shiftplanner';
<NoSSR>
<ShiftPlanner plan={data} />
</NoSSR>
Contact
Created by @Pawan Gujral - feel free to contact me for any issue OR feedback.
License
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago