@takamaki-group/ui-components NPM

Takamaki react js UI Components

This package used to share all re-usable react js components created by our company.

Alt Text

How to use

open your react js project directory and run this code

npm install @takamaki-group/ui-components

import the component you want to use

import { ImageMarker, ImageMarkerPreview } from '../../../material-component/dist';

// ...

return (
    <ImageMarkerPreview
        data={data}
        openLayerDimensions={[1024, 968]}
    />
)

Or by import the default object

import TakamakiMaterialComponents from '../../../material-component/dist';

// ...

return (
    <TakamakiMaterialComponents.ImageMarkerPreview
        data={data}
        openLayerDimensions={[1024, 968]}
    />
);

Components list

ImageMarker

ImageMarkerPreview

ImageMarker

A UI component use Openlayer to mark a specific image.

Properties

name	description	example	required	default value
openLayerDimensions	will divide the image to columns and rows so the marker will be in the location of col no x and row number y no of col, no of rows	1024,600	no	1024,968
removeMessage	the remove button message	"delete"	no	"remove"
saveMessage	the save button message	"save"	no	"save"
preview	used to make the component in preview mode (will disable the buttons)		no	false
photoData	the Image Data	{ photo: "image Url", ...any_other_properties }	yes	___
data	the marker data (if this property not added, the marker will not be added too that mean the marker not set yet)	{ coordinates: {x: 37, y:70}, ...any_other_properties }	no	___
handleSave	method will fire when click save button	(data, latestCoordinates)=>{ console.log(data); // all properties of data and photoData console.log(latestCoordinates); // {x: 37, y:70}	yes	___
handleClose	method will fire when click save button	()=>{}	no	___

ImageMarkerPreview

A UI component use Canvas that draw the image as a background and draw a marker on the provided location.

Properties

name	description	example	required	default value
openLayerDimensions	will divide the image to columns and rows so the marker will be in the location of col no x and row number y no of col, no of rows	1024,600	no	1024,968
data	the marker data	{ coordinates: {x: 37, y:70}, photo: "image Url", }	yes	___
onLoad	a method fire when the image and marker loaded	()=>{ console.log('component loaded'); }	no	___
className	you can add any class to main component using this property	"component_class_name"	no	___
containerClassName	you can add any class to the image container	"conatainer_class_name"	no	___
imageClassName	you can add any class to the image tag	"image_class_name"	no	___